設計大綱

今天要來設計「方案」，外面的網站通常會有3個方案供使用者選擇。另外如果要吸引使用者註冊的話，那通常會有一個是「免費試用」方案讓使用者試用，從而引導使用者註冊會員。因此今天這個「方案的區塊」會以3個方案為主，分別是「免費試用」、「斜桿方案」以及「專業方案」。

如同上面幾個區塊所講的，因為Grid systems有12欄，所以每個方案會佔4欄。而方案裡面的內容會包括「標題」、「價格」、「內容」以及「按鈕」。

最後，基於本平台首要的目的是讓使用者免費試用，因此「免費試用」的方案會用主要色作為背景顏色；另外兩個方案則以透明度較淺的主要色作為背景顏色，以突出「免費試用」的方案。

步驟

標題

1. 在畫布中間輸入標題文案
2. 標題的大小為32px
3. 標題的字重為Bold
4. 標題的顏色為Primary（#9B3C05）
5. 把標題置中對齊

免費試用方案

1. 在下方畫出一個4欄寬的長方形，高度先隨便拉
2. 背景顏色為Primary（#9B3C05），並加入陰影（#792C00,X4,Y4,B8）
   
3. 在長方形裡面，輸入「免費試用」方案標題，並設定樣式

   • 輸入**「免費試用」**，並設定樣式
     a. 文字大小：24px
     b. 字重：Bold
     c. 文字顏色：Primary-light（#EFEAE5）
     d. 與上方距離 48px
     

   • 下一行輸入「$0」，並設定樣式
     a. 文字大小：48px
     b. 字重：Bold
     c. 文字顏色：Primary-light（#EFEAE5）
     d. 與上方距離 8px
     

   • 下一行輸入「/月」，並設定樣式
     a. 文字大小：16px
     b. 字重：Regular
     c. 文字顏色：Primary-light（#EFEAE5）
     d. 與左方距離 16px
     

4. 把整個標題group起來，並置中對齊
5. 輸入「免費試用」的「方案內容」，並設定樣式
   • 載入icon，並調整樣式
     a. 大小：24px x 24px
     b. 顏色為Primary-light（#EFEAE5）
     
   • 輸入文案內容，並調整樣式
     a. 文字大小：16px
     b. 字重：Regular
     c. 文字顏色：Primary-light（#EFEAE5）
     d. Margin-top為 32px
     
     e. 用Repeat Grid拉出其它內容
     f. 下方每個文案內容都相距 12px
     
     g. 與方案背景框左右margin保持 40px，並置中
6. 畫出button，並調整樣式
   • button 寬度與上方方案內容同寬
   • button底色為 Secondary (#FDFCFC)
     
   • button 文字樣式為 16px、Normal、Primary(#9B3C05)
     
   • 確認按鈕與上方間距32px、與下方間距 96px
7. 檢查所有內容物是否置中，並且「方案背景框」是否有留48px、40px、96px、40px的Padding

斜桿方案

1. 把「免費方案」複製貼上
2. 修改背景框底色
   • 把背景框底色的透明度調整為8%
   • 刪掉陰影
     
3. 修改文案，並修改文字顏色
   • 標題文字顏色統一改為Primary（#9B3C05）
     
   • 方案內容和icon顏色改為Dark(#707070)
     
4. 修改button文案和顏色
   • 修改Button的文案、顏色為Primary(9B3C05)
   • 修改button的顏色為透明、Border為Primary(9B3C05)
     
5. 檢查所有內容物是否置中，並且「方案背景框」是否有留48px、40px、96px、40px的Padding

專業方案

1. 把斜桿方案直接Copy and Paste
2. 修改方案名稱
3. 再多新增一項方案內容
4. 一樣檢查所有內容物是否置中，並且最終方案背景框是否有留48px、40px、96px、40px的Padding
   

調整間距

1. 所有方案與上方大標題的間距為 40px
2. 這樣就完成啦！?
   

結論

設計方案時要先想好「平台的目的為何？」、「有要突出哪一個方案嗎？」，然後，那一個方案就要設計得與其他方案不太一樣，例如顏色的不同、加入陰影等等，以突出它。

這一個區塊的設計一樣可以先參考其他網站，再來想想看Bootstrap有沒有哪裡可以「幫忙」的?，總之腦袋就是要保持著一個一邊設計一邊想的模式囉！
那明天再來設計下一個區域吧！